<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
    >
      <el-form-item label="用户姓名" prop="adminName">
        <el-input
          v-model="queryParams.adminName"
          placeholder="请输入用户姓名"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="用户账户" prop="adminAccount">
        <el-input
          v-model="queryParams.adminAccount"
          placeholder="请输入用户账户"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="用户电话" prop="adminPhone">
        <el-input
          v-model="queryParams.adminPhone"
          placeholder="请输入用户电话"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          >新增</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          @click="handleUpdate"
          >修改</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          @click="handleDelete"
          >删除</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          >导出</el-button
        >
      </el-col>
      <!-- <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> -->
    </el-row>

    <el-table
      v-loading="loading"
      :data="adminsList"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="用户id" align="center" prop="adminId" />
      <el-table-column label="用户姓名" align="center" prop="adminName" />
      <el-table-column label="用户账户" align="center" prop="adminAccount" />
      <!-- 性别显示方法一 -->
      <!-- <el-table-column label="用户性别" align="center"  :formatter="adminSexFormate" /> -->
     <!-- 方性别显示法二 -->
            <el-table-column label="用户性别" align="center" prop="adminSex">
            <template slot-scope="scope">
            <span v-if="scope.row.adminSex=== 0">男</span>
            <span v-if="scope.row.adminSex=== 1">女</span>
            </template>
            </el-table-column>
      <el-table-column
        label="用户头像"
        align="center"
        prop="adminImg"
        width="100"
      >
        <template slot-scope="scope">
          <image-preview :src="scope.row.adminImg" :width="50" :height="50" />
        </template>
      </el-table-column>
      <el-table-column label="用户电话" align="center" prop="adminPhone" />
      <el-table-column label="用户邮箱" align="center" prop="adminEmail" />
      <el-table-column label="用户登录ip" align="center" prop="adminLastip" />
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            >修改</el-button
          >
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

<div align=center style="margin-top:20px">
<el-pagination
text-align:center
  background
  layout="prev, pager, next"
  :total=total
  :page-size=queryParams.pageSize
  :current-page=this.queryParams.pageNum
  @current-change="handleCurrentChange"
    >
</el-pagination>
</div>
    <!-- 添加或修改管理员对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="用户姓名" prop="adminName">
          <el-input v-model="form.adminName" placeholder="请输入用户姓名" />
        </el-form-item>
        <el-form-item label="用户账户" prop="adminAccount">
          <el-input v-model="form.adminAccount" placeholder="请输入用户账户" />
        </el-form-item>
        <el-form-item label="用户密码" prop="adminPassword">
          <el-input ref="password" type="password"  v-model="form.adminPassword" placeholder="请输入用户密码" />
        <span class="show-pwd" @click="showPwd">
        <svg-icon icon-class="eye" />
        </span>
        </el-form-item>

            <el-form-item label="用户性别">
              <el-select v-model="form.adminSex" placeholder="请选择性别">
                <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
        <el-form-item label="用户头像" prop="adminImg">
          <el-upload
            class="upload-demo"
            action= ""
            :http-request="upload"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :file-list="fileList"
            list-type="picture">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
        </el-form-item>
        <el-form-item label="用户电话" prop="adminPhone">
          <el-input v-model="form.adminPhone" placeholder="请输入用户电话" />
        </el-form-item>
        <el-form-item label="用户邮箱" prop="adminEmail">
          <el-input v-model="form.adminEmail" placeholder="请输入用户邮箱" />
        </el-form-item>
        <el-form-item label="登录ip" prop="adminLastip">
          <el-input v-model="form.adminLastip" placeholder="请输入用户登录ip" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm()">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listAdmins,
  getAdmins,
  delAdmins,
  addAdmins,
  updateAdmins,
  getAdminExcel,
} from "@/api/admin";
import axios from 'axios';

export default {
  name: "Admins",
  data() {
    return {
      // 总条数
      total: 0,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 管理员表格数据
      adminsList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 5,
        adminName: null,
        adminAccount: null,
        adminPhone: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
      //性别选择
       options: [{
          value: 0,
          label: '男'
        }, {
          value: 1,
          label: '女'
        }
       
        ],
         fileList: []
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询管理员列表 */
    getList() {
      this.loading = true;
      listAdmins(this.queryParams).then((response) => {
        this.adminsList = response.content.data.list;
        this.total =  response.content.data.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        adminId: null,
        adminName: null,
        adminAccount: null,
        adminPassword: null,
        adminSex: null,
        adminImg: null,
        adminPhone: null,
        adminEmail: null,
        adminLastip: null
      };
      //   this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    //初始化表单
    resetForm(formName) {
    //  this.queryParams.adminName=null;
    //  this.queryParams.adminAccount=null;
    //  this.queryParams.adminPhone=null;
    //   this.$nextTick(() => {
        this.$refs[formName].resetFields();
    //   });
    },

    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.adminId);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.fileList=[];
      this.title = "添加管理员";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const adminId = row.adminId || this.ids;
      getAdmins(adminId).then((response) => {
        this.form = response.content.data;
        this.open = true;
        this.title = "修改管理员";
        this.fileList=[{name: '当前头像', url: process.env.BASE_API+response.content.data.adminImg}]
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.adminId != null) {
            updateAdmins(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addAdmins(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const adminIds = row.adminId || this.ids;
      this.$confirm('是否确认删除管理员编号为"' + adminIds + '"的数据项？','删除',{
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        .then(function () {
          return delAdmins(adminIds);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
         window.location =  
        'http://localhost:8080/city/v1/getAdminExcel?adminName='+this.queryParams.adminName+'&adminAccount='
           +this.queryParams.adminAccount
           +'&adminPhone='+this.queryParams.adminPhone
      },
    //性别表格格式化
    adminSexFormate(row,index){
      if (row.adminSex ===  0) {
        return "男";
      } else if(row.adminSex === 1){
        return "女";
      }
    },
    //修改框查看密码
      showPwd() {
      if (this.$refs.password.type === 'password') {
       this.$refs.password.type  = ''
      } else {
      this.$refs.password.type  = 'password'
      }
    },
    //头像上传
     handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      upload(param) {
			const formData = new FormData()
			formData.append('fileList', param.file)
			axios.post(process.env.BASE_API+'/city/v1/uploadImage', formData).then(response => {
				//根据返回值进行判断是否上传成功
        console.log(response)
				if(response.data.code==200){
					//上传成功
					console.log('上传图片成功')
          this.fileList=[{name: '当前头像', url: process.env.BASE_API+response.data.content.url}]
          this.form.adminImg=response.data.content.url
				}else{
					//上传失败
					console.log('图片上传失败')
				}
			}).catch(response => {
				console.log('异常处理')
			})
		},

     //改变页码
    handleCurrentChange(val) {
      this.queryParams.pageNum = val
      this.getList()
    }


  },
};



</script>
<style rel="stylesheet/scss" lang="scss" scoped>
 .show-pwd {
    position: absolute;
    right: 10px;
    top: 7px;
    font-size: 16px;
    color: #889aa4;
    cursor: pointer;
    user-select: none;
  }
</style>